<template>
    <div class="appmain">
        <div class="main-child">
            <div class="txun">实际与计划能耗比例</div>
            <!-- 1、异常总数 -->
            <div class="stytr">
                <div class="unusual-left">
                    <div class="next-title"><span>·&nbsp;异常指数</span><span class="title-number">737</span></div>
                    <div class="unusual-canvas"><div  ref="main" style="width:100%;height:120%;"></div></div>
                </div>
                <div class="unusual-right">
                    <div class="next-title"><span>·&nbsp;风险指数</span><span class="title-number">16%</span></div>
                    <div class="risk">
                        <div class="risk-left">
                            <div class="risk-left-common onecolor"></div>
                            <div class="risk-left-common twocolor"></div>
                            <div class="risk-left-common threecolor"></div>
                        </div>
                        <div class="risk-right">
                            <div class="leftheight1">  
                                <div class="elementcommon">  
                                    <div class="childcommon hgig">高</div>  
                                </div> 
                            </div>
                            <div class="leftheight">
                                <div class="elementcommon">  
                                    <div class="childcommon midden">中</div>  
                                </div> 
                            </div>
                            <div class="leftheight">
                                <div class="elementcommon element3">  
                                     <div class="childcommon low">低</div>  
                                </div> 
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
            <!-- 2、异常趋势 -->
            <div class="stytr">
                <div class="next-title">·&nbsp;异常趋势</div>
                <div class="trend">
                    <div ref="main1" class="trendcanvas" style="width: 100%;height:150%;top:-30%;position:relative"></div>
                </div>
            </div>
            <!-- 3、异常事件发生率 -->
            <div class="stytr1">
                <div class="next-title">·&nbsp;异常事件发生数</div>
                <div class="trend">
                    <div ref="main2" class="trendcanvas" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var echarts = require("echarts");
import { debounce } from "../../../utils";
export default {
  name: "energy",
  data() {
    return {
      chart: null,
      chart1: null,
      chart2: null,
      startCharts: null
    };
  },
  mounted() {
    this.initChart();
    this.initChartone();
    this.initCharttwo();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
        this.chart1.resize();
        this.chart2.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
    clearInterval(this.startCharts);
  },
  methods: {
    // 图表渲染
    initChart() {
      let isSet = true;
      let _this = this;
      this.chart = echarts.init(this.$refs.main);
      this.chart.on('mouseover', function (param) {
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        isSet = false
      })
      this.chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          isSet = true;
        }
      });
      var option = {
        tooltip: {
          formatter: "{a}<br>{b}: {c} ({d}%)",
          fontSize: "13"
        },
        color: ["#faf31f", "#15cdff"],
        legend: {
          data: ["紧急事件", "一般事件"],
          icon: "rect",
          right: "30px",
          selectedMode:false,
          bottom: "0",
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "异常指数",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 37, name: "紧急事件" },
              { value: 700, name: "一般事件" }
            ]
          }
        ]
      };
      //设置series
      this.chart.setOption(option);
      app.currentIndex = -1;

      var chartHover = function() {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        _this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
      };
      this.startCharts = setInterval(chartHover, 2000);
    },
    initChartone() {
      // 二
      this.chart1 = echarts.init(this.$refs.main1);
      var data2 = [148, 148, 148, 148, 148, 148, 148];
      let title = `预阀值${data2[0]}`;
      this.chart1.setOption({
        grid: [{}, {}],
        title: {
          text: title,
          top: 60,
          right: "right",
          textStyle: {
            color: "#fff000",
            fontWeight: "normal",
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "category",
            data: ["6/1", "6/2", "6/3", "6/4", "6/5", "6/6", "6/7"],
            axisLabel: {
              textStyle: {
                color: "#dddddd",
                fontSize: "13px"
              }
            }
          },
          {
            gridIndex: 1,
            axisLabel: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            show: false
          },
          {
            gridIndex: 1,
            show: false
          }
        ],
        series: [
          {
            name: "异常趋势",
            type: "line",
            valueAxisIndex: 0,
            data: [140, 130, 155, 165, 130, 158, 139],
            tooltip: {
              formatter: "{a}: {c}"
            },
            barMaxWidth: 40,
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(23, 205, 255, 0.3)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(23, 205, 255, 0)"
                    }
                  ]
                },
                shadowColor: "rgba(23, 205, 255, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#17cdff"
              }
            },
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            name: "预警标准",
            type: "line",
            data: data2,
            tooltip: {
              formatter: function() {
                return;
              }
            },
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#faf31f"
              }
            }
          },
          {
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(0, 0, 0, 0)"
              }
            }
          }
        ]
      });
    },
    initCharttwo() {
      // 三
      this.chart2 = echarts.init(this.$refs.main2);
      var gain = 0.9;
      var gap = 0;
      var myColor = ["#15cdff", "#15cdff", "#15cdff", "#15cdff"];
      var myBgColor = [
        "rgba(230,56,16,0.2)",
        "rgba(255,107,0,0.2)",
        "rgba(227,182,31,0.2)",
        "rgba(19,181,177,0.2)"
      ];
      var data = [140, 147, 19, 111, 200];
      this.chart2.setOption({
        // backgroundColor: "rgba(0,0,0,0.8)",
        grid: {
          left: "0",
          top: "15%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(160,160,160,0.3)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "13px"
              },
              rotate: -30
            },
            data: ["烟雾", "闯入", "群聚", "紧急按钮", "逃生门开启"]
          },
          {
            type: "category",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: []
          }
        ],
        yAxis: {
          splitLine: { show: false },
          show: false //去掉y轴所有的数据
        },
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: "#333"
              }
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: "20px",
                  color: "#ffffff"
                }
              }
            },
            barWidth: "20%",
            data: data
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: "#333"
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            barWidth: "20%",
            data: data
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #ff6661;
$fontcolor1: #8a7ced;
$fontcolor2: #15cdff;
$fontcolor3: #faf31f;
$fontcolor3: #4396ff;
$mrtop: 13px;
.appmain {
  height: 100%;
  margin-top: 50px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  .main-child {
    height: 84%;
    width: 100%;
    position: absolute;
    padding: 0px 40px 0px 0px;
    top: 8%;
    .txun {
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size: 100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    // 公用总体
    .stytr {
      width: 94%;
      margin-left: 3%;
      height: 28%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .stytr1 {
      width: 94%;
      margin-left: 3%;
      height: 32%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .next-title {
      width: 100%;
      border-bottom: 2px solid $borderbottom;
      padding: 8px;
      .title-number {
        float: right;
      }
    }
    // 1、异常总数
    .unusual-left {
      width: 59%;
      // margin-right: 1px;
      height: 100%;
      float: left;
      border-right: 1px solid $bordercolor;
      .unusual-canvas {
        width: 100%;
        height: 65%;
        padding-left: 6.5%;
      }
      .unusual-bottom {
        width: 100%;
        height: 15%;
        text-align: center;
        .unusual-block-one {
          width: 10px;
          height: 10px;
          background-color: #faf31f;
          display: inline-block;
        }
        .unusual-block-two {
          width: 10px;
          height: 10px;
          background-color: #15cdff;
          display: inline-block;
        }
      }
    }
    .unusual-right {
      width: 39%;
      height: 100%;
      float: left;
      // background-color: saddlebrown;
      .risk {
        width: 70%;
        height: 71%;
        margin-top: 7%;
        margin-left: 15%;
        border-bottom: 1px solid #525156;
        text-align: center;
        .risk-left {
          width: 48%;
          height: 100%;
          // display: inline-block;
          float: left;
          .risk-left-common {
            margin-left: 35%;
            width: 40%;
            height: 30%;
          }
          .onecolor {
            margin-top: 10%;
            // background-color: #ff6661;
            background-color: #666;
            border-bottom: 1px solid black;
          }
          .twocolor {
            // background-color: #8a7ced;
            background-color: #666;
            border-bottom: 1px solid black;
          }
          .threecolor {
            background-color: #4396ff;
          }
        }
        .risk-right {
          width: 48%;
          height: 100%;
          float: left;
          // background-color: cadetblue;
          .leftheight1 {
            height: 30%;
            margin-top: 10%;
          }
          .leftheight {
            height: 30%;
          }
          .elementcommon {
            width: 45px;
            height: 45px;
            // background-color: #4396ff;
            border-radius: 50%;
            padding: 7.5px;
            .childcommon {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              line-height: 30px;
              text-align: center;
            }
            .hgig {
              // background-color: #ff6661;
            }
            .low {
              background-color: #4396ff;
            }
            .midden {
              // background-color: #8a7ced;
            }
          }
          .element1 {
            background: rgba($color: #ff6661, $alpha: 0.3);
          }
          .element2 {
            background: rgba($color: #4396ff, $alpha: 0.3);
          }
          .element3 {
            background: rgba($color: #8a7ced, $alpha: 0.3);
          }
        }
      }
    }
    //2、异常趋势
    .trend {
      height: 81%;
      width: 100%;
    }
  }
}
</style> 
